<!--
 * @Description  : 
 * @Author       : jiangxiaoying
 * @Date         : 2021-03-09 13:23:57
 * @LastEditTime : 2021-03-12 16:32:33
 * @LastEditors  : jiangxiaoying
 * @FilePath     : \cloud-components\docs\pages\components\cloud-tag\example1.vue
-->
<template>
  <div class="tag-box">
    <div class="tag-item">
      <CloudTag>标签名字1</CloudTag>
    </div>
    <div class="tag-item">
      <CloudTag closable @close="log">标签名字2</CloudTag>
    </div>
    <div class="tag-item">
      <CloudTag closable @close="preventDefault">标签名字3</CloudTag>
    </div>
  </div>
</template>

<script>
  export default {
    title: '1.基础用法',
    subTitle: '基础用法',
    data () {
      return {
      }
    },
    methods: {
      log (e) {
        console.log(e);
      },
      preventDefault (e) {
        e.preventDefault();
        console.log('Clicked! But prevent default.');
      }
    }
  }
</script>

<style lang="scss">
  .tag-box {
    display: flex;
  }
  .tag-item {
    padding-right: 10px;
  }
</style>